<template>
    <div>
        <dl>
            <dt><input type="checkbox" name="box" v-model="box">标题</dt>
            <dd v-for="i in total"><input type="checkbox" v-model="i.check" name="box" :value="i.id">{{i.name}}</dd>
        </dl>
        {{checkList}}
        <br>
        <br>
        <br>
        <br>
        <table>
            <thead>
            <tr>
                <th style="line-height: 38px">选中数
                    {{checkedCount}}<input type="checkbox" v-model="allchecked"
                                           style="zoom:200%;vertical-align: middle">
                </th>
                <th>name</th>
                <th>age</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list">
                <td><input type="checkbox" v-model="item.checked" style="zoom:200%"></td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "checkbox",
        data() {
            return {
                total: [
                    {id: 1, check: false, name: 'A'},
                    {id: 2, check: false, name: 'A'},
                    {id: 3, check: false, name: 'A'},
                    {id: 4, check: false, name: 'A'},
                    {id: 5, check: false, name: 'A'},
                ],
                list: [
                    {
                        name: '小明',
                        age: 23,
                        checked: false
                    },
                    {
                        name: '小红',
                        age: 2,
                        checked: true
                    },
                    {
                        name: '小蓝',
                        age: 23,
                        checked: true
                    },
                    {
                        name: '小bai',
                        age: 40,
                        checked: true
                    },
                    {
                        name: '王小二',
                        age: 18,
                        checked: false
                    }
                ]
            }
        },
        methods: {},
        computed: {
            checkList(){
                let l = []
                this.total.forEach(res=>{
                    if (res.check){
                        l.push(res.id)
                    }
                })
                return l
            },
            box: {
                get(){
                    let num = 0
                    this.total.forEach(ser=>{
                        if (ser.check) num++
                    })
                    if (num==this.total.length){
                        return true
                    }else{
                        return false
                    }
                },
                set(val){
                    this.total.forEach(res=>{
                        res.check = val
                    })
                }
            },
            allchecked: {
                // getter
                get: function () {
                    return this.list.length == this.checkedCount
                },
                // setter
                set: function (val) {
                    //val就是点击之后，全选按钮的v-model值（状态）,勾上后就是val的值就是true。未勾上就是false
                    this.list.forEach(item => {
                        item.checked = val
                    })
                }
            },
            checkedCount: {
                // getter
                get: function () {
                    var i = 0
                    this.list.forEach(item => {
                        if (item.checked === true) i++
                    })
                    return i
                }
            }
        },
        filters: {},
        watch: {},
    }
</script>

<style scoped>

</style>
